<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="content-type" 
        content="text/html; charset=UTF-8" />
  <script type="text/javascript" src="altpreso.js"></script>
  <title>altPreso: Navigation</title>
</head>
<body>

<div class="slide">
<h1 class="center">
  <small>alt</small>Preso: Navigation
</h1>
</div>

<div class="slide">
<h1>two modes</code></h1>
<dl>
  <dt>show-mode</dt>
    <dd>when you view this page as a <em>slideshow</em>.</dd>
  <dt>normal-mode</dt>
    <dd>when you view this page as a <em>normal page</em>.</dd>
</dl>
</div>

<div class="slide">
<h1>two boxes</h1>
<ul>
  <li>During show-mode, you have a <strong>maxbox</strong>.</li>
  <li>While in normal-mode, you have a <strong>minbox</strong>.</li>
  <li>Use them to navigate.</li>
</ul>
<img class="center" alt="minbox and maxbox" src="img/minmaxbox.png" />
</div>

<div class="slide">
<h1>maxbox</h1>
<ul>
  <li>To bookmark the current slide - click on the current page number.</li>
  <li>Jumping to another slide - select a slide from the combo box.</li>
</ul>
<table class="center incremental" border="1">
  <tr>
    <td>Next</td>
    <td><code>Right Arrow</code></td>
  </tr>
  <tr>
    <td>Previous</td>
    <td><code>Left Arrow</code></td>
  </tr>
  <tr>
    <td>Next slide <small>(ignore incremental)</small></td>
    <td><code>PageDown</code></td>
  </tr>
  <tr>
    <td>Previous slide <small>(ignore incremental)</small></td>
    <td><code>PageUp</code></td>
  </tr>
  <tr>
    <td>First slide</td>
    <td><code>Home</code></td>
  </tr>
  <tr>
    <td>Last slide</td>
    <td><code>End</code></td>
  </tr>
  <tr>
    <td>Normal-mode</td>
    <td><code>ESC</code></td>
  </tr>
</table>
</div>

<div class="slide">
  <h1>maxbox philosophy</h1>
  <ol>
    <li>Reuse browser features whenever possible.</li>
    <li>Respect users browsing habits, only override necessary shortcut keys.</li>
  </ol>
  <p>With guidelines above, e.g. mozilla-based browser users able to 
  browse the slideshow using keys and features they familiar with:</p>
  <ul>
    <li>text zooming: <code>Ctrl++;, Ctrl+-, Ctrl+0(normal)</code></li>
    <li>page scrolling: <code>Space/Up Arrow, Shift+Space/Down Arrow</code></li>
    <li>fullscreen: <code>F11</code></li>
    <li>look-and-feel switching: <code>View > Page Style</code></li>
    <li>mouse operations work as usual</li>
  </ul>
</div>

<div class="slide">
<h1>minbox</h1>
<ul>
    <li>To start the slideshow - click on the special symbol &#216; in minbox.</li>
</ul>
<img class="center" alt="minbox and maxbox" src="img/minmaxbox.png" />
</div>

<div class="slide">
<h1>Hack the boxes</h1>
<ul>
    <li>This preso illustrates navigation tips for 
    both <em>default</em> minbox and <em>default</em> maxbox 
    (that come with altPreso).</li>
</ul>
<img class="center" alt="minbox and maxbox" src="img/minmaxbox.png" />
<ul>
    <li>Feel free to enhance the boxes to suit your preferences,
    <li>or write new ones for yourself and share with us!</li>
</ul>
</div>
</body>
</html>